<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
  <head>
    <title>J-Login</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <script src="js/modernizr.js"/>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
      $(document).on("ready", inicio);
      function inicio()
      {
        $('#fakebutton').on('click',validarCampos);
        ;
      }
      function validarCampos()
      {
        var reglas = true;
        if(10 > $('#emailRegister input').attr("value").length){ 
          $("#entryMessage").css("height", "2em");
          $("#entryMessage").html('Verify email!');
          reglas = false;
        }
        if(5 > $('#userRegister input').attr("value").length){         
          $("#entryMessage").css("height", "2em");
          $("#entryMessage").html('Verify user!');
          reglas = false;
        }
        if(5 > $('#passRegister input').attr("value").length){ 
          $("#entryMessage").css("height", "2em");
          $("#entryMessage").html('Password too short!');
          reglas = false;
        }
        if($('#passRegister input').attr("value") != $('#passRepRegister input').attr("value")){
          $("#entryMessage").css("height", "2em");
          $("#entryMessage").html("Passwords don't match!");
          reglas = false;
        }
        if(reglas){
          $("#fakebutton").css("display","none");
          $("#registerButton a").css("display","inline-block");
          $("#entryMessage").css("height", "0em");
          $("#entryMessage").html("");
          $("#registerButton a").click();
        }
        
      }
    </script>
  </head>
  <body>
    <header>
      <h1>j-Blogger</h1>
      <div id="login">
        <h:form>
          <div style="display: inline-block; vertical-align: top">
            <label>E-Mail:</label>

              <h:inputText value="#{loginController.jmbUser.userMail}"  class="input"/>
            
              <label>Password:</label>
              <h:inputSecret value="#{loginController.jmbUser.userPassword}"  class="input"/>

            
            <h:commandLink value="Log-in" class="Jbutton" action="#{loginController.login()}"/>
          </div>
             

                  
        </h:form>
      </div>
    </header>
    <section>
      <figure id="logo" >
        <img  src="img/logoGJ.gif"/>
        <figcaption>

        </figcaption>
      </figure>

      <div id="register">

        <h:form>


          <div class="field" id="emailRegister" >
            E-mail:
            <h:inputText value="#{registerController.jmbUser.userMail}" class="input" />
          </div>
          <div class="field" id="userRegister" >
            User:
            <h:inputText value="#{registerController.jmbUser.userJnick}" class="input"/>
          </div>
          <div class="field" id="passRegister">
            Password:
            <h:inputSecret value="#{registerController.jmbUser.userPassword}"  class="input"/>
          </div>
          <div class="field" id="passRepRegister">
            Repeat Password:
            <h:inputSecret  class="input" />
          </div>


          <div class="field" id="registerButton">
            <span id="fakebutton" class="Jbutton">Register</span>
            <h:commandLink value="Register" class="Jbutton" style="display: none" actionListener="#{registerController.registrarCuenta()}"/>
            <div id="entryMessage" class="errorMessage"/>
          </div>

        </h:form>
      </div>
    </section>
  </body>
</html>
